<template>
	<view class="goods_detail">
		<!-- 轮播图 -->
		<swiper indicator-dots circular>
			<swiper-item v-for="(item, index) in swipers" :key="index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		
		<!-- 文字描述 -->
		<view class='box1'>
			<view class='price'>
				<text>¥{{info.original_price}}</text>
				<text>¥{{info.original_price}}</text>
			</view>
			<view class='goods_name'>{{info.goods_name}}</view>
		</view>
		<view class='line'></view>
		
		<!-- 货号/库存/浏览次数 -->
		<view class='box2'>
			<view>
				卖家:<text decode=true space="nbsp" user-select=true>   fasdfadsfasd     a       格</text>
				<a href='https://www.baidu.com'>{{info.store_name}}</a>
			</view>
			<view>浏览次数: {{info.viewed}}</view>
		</view>
		<view class='line'></view>
		
		<!-- 详细介绍 -->
		<view class='box3'>
			<view class='tit'>详情介绍</view>
			<view class='content'>
				<rich-text :nodes='content'>
				</rich-text>
			</view>
		</view>
		
		<!-- 底部购物导航 -->
		<view class='goods_nav'>
			<uni-goods-nav
				:fill="true"  
				:options="options" 
				:buttonGroup="buttonGroup" 
				@click="onClick" 
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'

	export default {
		components: {uniGoodsNav},
		
		data() {
			return {
				swipers: [],
				id: 1,
				info: {
					goods_name: 'none',
				},
				content: '',
				
				options: [
					// 这里要把icon改为指定的链接
					{
						icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F12%2F02%2F61d3bc2e2e340d5f87cf686ce68a07dd.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621671191&t=a277e884053dd54ca94d54194b6f3b8b',
						text: '客服',
					},
					{
						icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F08%2F11%2F2057ac6da37b165.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621671191&t=27443a47a9c06b236ec5f45e44eb0543',
						text: '店铺',
						info: 0,
						infoBackgroundColor:'#007aff',
						infoColor:"red"
					}, 
					{
						icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattimg.dospy.com%2Fimg%2Fday_091202%2F20091202_46ad536a66ae218999397v3Bi55EfIB5.png&refer=http%3A%2F%2Fattimg.dospy.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621671191&t=2a1ff2c4d9f4ee2a0bff992baef74f40',
						text: '购物车',
						info: 17,
					},
				],
				buttonGroup: [
					{
					  text: '加入购物车',
					  backgroundColor: '#ff0000',
					  color: '#fff'
					},
					{
					  text: '立即购买',
					  backgroundColor: '#ffa200',
					  color: '#fff'
					},
				]
			}
		},
		methods: {
			// 获取指定商品轮播图的数据
			async getSwipers() {
				// console.log('~~~~~获取指定id的轮播图数据', this.id)
				const res = await this.$myRequest({
				  method: 'GET',
				  url: '/api/store/goods/',
				})
				if(res.statusCode !== 200){
					return uni.showToast({
						title: '获取数据失败!',
						icon: 'none'
					})
				}
				
				var key_name = 'image'
				var values = this.get_keyname_value(res.data, key_name)
				for(var i = 0; i < values.length; i++){
					 values[i] = this.$baseUrl + values[i]
				}
				
				this.swipers = [...this.swipers, ...values]
			},
			
			// 获取指定商品的详细信息
			async getGoodsInfo(){
				const res = await this.$myRequest({
					method: 'GET',
					url: '/api/store/goods?id=' + this.id,
				})
				this.info = res.data
				
				var image_href = this.$baseUrl + res.data.image
				this.swipers.push(image_href)
				this.getSwipers()
				
				// 富文本样式调节
				var adImage = res.data.rich_text;
				var regex = new RegExp('<img','gi');
				adImage = adImage.replace(regex,'<img style="max-width:100%;"');
				this.content = adImage;
				// this.content = res.data.rich_text
			},
			
			// 底部购物导航
			onClick (e) {
				uni.showToast({
				  title: `您点击了[${e.content.text}]按钮`,
				  icon: 'none'
				})
			},
			buttonClick (e) {
				console.log(e.index)
				if(e.index == 0){
					this.options[2].info++
				}
			}
		},
		
		// 初始化时调用
		onLoad(options) {
			this.id = options.id
			this.getGoodsInfo()
		},
		
		
	}
		
	
</script>

<style lang="scss">
	// 商品详情
	.goods_detail{
		// 轮播图
		swiper{
			width: 750rpx;
			height: 700rpx;
			image{
				height: 100%;
				width: 80%;
				margin-left: 10%;
			}
		}
		
		// 价格等
		.box1{
			padding: 10px;
			.price{
				font-size: 40rpx;
				color: $shop-color;
				line-height: 80rpx;
				text:nth-child(2){
					font-size: 28rpx;
					color: #CCCCCC;
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}
			.goods_name{
				font-size: 50rpx;
				line-height: 60rpx;
			}
		}
		// 分割线
		.line{
			margin-top: 10rpx;
			height: 10rpx;
			width: 100%;
			background: #EEEEEE;
		}
		
		// 货品货号
		.box2{
			padding: 0 10px;
			font-size: 32rpx;
			line-height: 60rpx;
		}
		
		// 详情介绍
		.box3{
			// padding: 0 10px;
			.tit{
				font-size: 52rpx;
				line-height: 60rpx;
				border-bottom: 2px solid #EEEEEE;
				padding: 10rpx;
				padding-left: 20rpx;
			}
			.content{
				font-size: 32rpx;
				padding: 10rpx;
				color: #404040;
				line-height: 50rpx;
				
			}
		}
		.goods_nav{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}
</style>
